<template>
	<view>
		<view class="top_bg">
			<image src="/static/img/feedback_bg.png" mode=""></image>
		</view>
		<view class="" v-if="load && !hasFeed">
			<view class="task_label flexRow">
				<image src="/static/img/task_lable.png"></image>
				<view >反馈问题类型</view>
			</view>
			<view class="btn_box flexRow">
				<view class="feed_btn" v-for="(item,key) in btnList" :class="{checked_btn: item.check}" :key="key" @tap="checkBtn(key)">
					{{item.text}}
				</view>
			</view>
			<view class="feed_input_box">
				<input class="feed_email" placeholder-class="feed_plac" v-model="email" type="text" value="" placeholder="请留下您的邮箱，以便我们及时反馈。" />
				<textarea class="feed_input" v-model="content" value="" placeholder-class="feed_plac" placeholder="请选择问题类型，帮助我们更快处理您的反馈建议。反馈内容最多120字" :maxlength="120" />
				<view class="add_img" @tap="addImg">
					<image class="add_icon" src="/static/img/add.png" mode=""></image>
					<image v-if="imgUrl" class="add_img_content" :src="imgUrl" mode=""></image>
				</view>
			</view>
			<view class="feed_alert">
				*我们将在收到问题反馈后工作日内72小时内处理
			</view>
			<view class="feed_submit" @tap="submit_feed">提交</view>
		</view>
		<view class="feed_box" v-if="load && hasFeed">
			<view class="feed_row flexRow">
				<view class="feed_row_label">
					您的问题:
				</view>
				<view class="feed_row_content">
					{{feedContent}}
				</view>
			</view>
			<view class="feed_row flexRow">
				<view class="feed_row_label">
					客服反馈:
				</view>
				<view class="feed_row_content">
					{{feedMsg}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../apiRequest/request.js'
	export default {
		data() {
			return {
				load: false,
				hasFeed: false,
				imgUrl: '',
				type: '',
				content: '',
				email: '',
				btnList: [
					{text: '功能异常',check: false,type: 0},
					{text: '体验问题',check: false,type:1 },
					{text: '功能建议',check: false,type: 2},
					{text: '其它',check: false,type: 3}
				],
				feedContent: '',
				feedMsg: ''
			}
		},
		
		onShow() {
			request.getFeedback().then(res=>{
				this.load = true
				if(res.data.code == 0){
					this.hasFeed = false
				}else{
					this.hasFeed = true
					this.feedContent = res.data.content
					this.feedMsg = res.data.msg
					
				}
			})
		},
		methods: {
			initFeedBack(){
				request.getFeedback().then(res=>{
					this.load = true
					if(res.data.code == 0){
						this.hasFeed = false
					}else{
						this.hasFeed = true
						this.feedContent = res.data.content
						this.feedMsg = res.data.msg
						
					}
				})
			},
			addImg(){
				let that = this;
				uni.chooseImage({
				    sourceType: ['album'], //从相册选择
					count:1,
				    success: function (res) {
						that.imgUrl = res.tempFilePaths[0]
				    }
				});
			},
			resetList(){
				let listCopy = this.btnList.slice()
				for (let var1 in listCopy) {
					listCopy[var1].check = false
				}
				this.btnList = listCopy
			},
			checkBtn(key){
				this.resetList()
				let listCopy = this.btnList.slice()
				listCopy[key].check = !listCopy[key].check
				this.type = listCopy[key].type
				this.btnList = listCopy
			},
			submit_feed(){
				console.log(this.type,this.content)
				if(this.type===''){
					uni.showToast({
					    title: '请选择问题类型',
						icon: 'none',
					    duration: 2000
					})
					return
				}
				if(this.email===''){
					uni.showToast({
					    title: '请填写邮箱',
						icon: 'none',
					    duration: 2000
					})
					return
				}
				if(this.content===''){
					uni.showToast({
					    title: '请填写问题内容',
						icon: 'none',
					    duration: 2000
					})
					return
				}
				let that = this;
				uni.showLoading({
					title: '加载中'
				})
				let filelist = [];
				if(this.imgUrl){
					filelist.push({
						uri: this.imgUrl
					})
				}
				uni.uploadFile({
					url: this.$baseUrl + 'v1/user/setFeedback', //仅为示例，非真实的接口地址
					files: filelist,
					filePath: '',
					formData: {
						'type': that.type,
						'email': that.email,
						'content': that.content
					},
					header:{
						'token': uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						if(res.code==200){
							that.resetList()
							that.imgUrl = '';
							that.email = '';
							that.content = '';
							that.type = '';
							uni.hideLoading()
							uni.showToast({
							    title: '提交成功',
								icon: 'none',
							    duration: 3000
							})
							that.initFeedBack()
							return
						}
						that.$unexpected(res.msg)
						if(res.code==300){
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
						
					},
					fail: () => {
						console.log(22);
						uni.hideLoading()
						uni.showToast({
						    title: '提交失败',
							icon: 'none',
						    duration: 3000
						});
					}
				});
			}
		}
	}
</script>

<style>
.top_bg{
	width: 100%;
	height: 250rpx;
}
.top_bg image{
	width: 100%;
	height: 100%;
}
.task_label{
	padding-left: 40rpx;
}
.btn_box{
	box-sizing: border-box;
	padding: 0 40rpx;
	justify-content: space-between;
}
.feed_btn{
	padding: 16rpx 26rpx;
	border:2rpx solid rgba(202,202,202,1);
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(202,202,202,1);
	line-height:28rpx;
}
.checked_btn{
	color:rgba(4,137,255,1);
	border-color: rgba(4,137,255,1);
}
.feed_input_box{
	padding: 0 20rpx;
	position: relative;
	padding-top: 40rpx;
	box-sizing: border-box;
}
.feed_input{
	box-sizing: border-box;
	height:400rpx;
	border:1rpx solid rgba(202,202,202,1);
	border-radius:10rpx;
	padding: 32rpx 40rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	line-height:40rpx;
	width: 100%;
}
.feed_email{
	width: 100%;
	box-sizing: border-box;
	height:80rpx;
	line-height: 80rpx;
	border:1rpx solid rgba(202,202,202,1);
	border-radius:10rpx;
	margin-bottom: 30rpx;
	padding-left: 40rpx;
	font-size:28rpx;
}
.feed_plac{
	color:rgba(202,202,202,1);
}
.add_img{
	box-sizing: border-box;
	position: absolute;
	width:160rpx;
	height:160rpx;
	border:2rpx dashed rgba(202,202,202,1);
	border-radius:10rpx;
	left: 40rpx;
	bottom: 20rpx;
	z-index: 99;
}
.add_img_content{
	position: absolute;
	width:160rpx;
	height:160rpx;
	border-radius:10rpx;
	left: 0;
	top: 0;
	z-index: 100;
}
.add_icon{
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.feed_alert{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(186,186,186,1);
	padding-left: 20rpx;
	margin-top: 30rpx;
}
.feed_submit{
	width:600rpx;
	height:100rpx;
	line-height: 100rpx;
	background:rgba(4,137,255,1);
	border-radius:10rpx;
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	text-align: center;
	margin: 0 auto;
	margin-top: 80rpx;
	margin-bottom: 40rpx;
}
.feed_box{
	padding: 60rpx 20rpx;
}
.feed_row{
	align-items: flex-start;
	margin-bottom: 40rpx;
}
.feed_row_label{
	width: 120rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	line-height:54rpx;
	text-align: right;
	margin-right: 30rpx;
}
.feed_row_content{
	width: 120rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	line-height:54rpx;
	flex: 1;
}
</style>
